{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import widgetButton %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridNav,gridConfig %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@jquery_ui_css'
    '@multiselect_css'
    '@jqgird_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 widget-container-col">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="smaller widget-title">{{ 'Notice'|trans }}</h4>
                                <div class="widget-toolbar no-border">
                                    <a class="btn btn-xs btn-light bigger" href="javascript:void(0);" onclick="showTab('{{ 'Bulletin management'|trans }}','{{ path('icsoc_notice_index') }}')">
                                        <i class="ace-icon fa fa-arrow-left"></i>
                                        {{ 'More'|trans }}
                                    </a>
                                    <a href="#" data-action="collapse">
                                        <i class="ace-icon fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <table class="table table-condensed table-hover table-no-margin">
                                        <tbody>
                                        {% for top in topnotcies %}
                                            <tr>
                                                <td>
                                                    <a href="javascript:void(0);" onclick="showTab('{{ 'Select notice'|trans }}','{{ path('icsoc_notice_select', {'id':top.id})|raw }}')">
                                                        {{ top.title }}
                                                    </a>
                                                </td>
                                                <td>
                                                    {{ top.addTime|date('Y-m-d H:i:s') }}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        {% for notice in notices %}
                                            <tr>
                                                <td>
                                                    <a href="javascript:void(0);" onclick="showTab('{{ 'Select notice'|trans }}','{{ path('icsoc_notice_select', {'id':notice.id})|raw }}')">
                                                        {{ notice.title }}
                                                    </a>
                                                </td>
                                                <td>
                                                    {{ notice.addTime|date('Y-m-d H:i:s') }}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 widget-container-col">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="smaller widget-title lighter">{{ 'Help'|trans }}</h4>
                                {{ widgetButton() }}
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div id="tree2" class="tree"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 widget-container-col">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="smaller widget-title">{{ 'Account information'|trans }}</h4>
                                {{ widgetButton() }}
                            </div>

                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12">
                                            <table class="table-responsive table-condensed table-hover table-no-margin">
                                                <tr>
                                                    <td><b>{{ 'Vcccode'|trans }}</b>: {{ agent.vcc_code }}</td>
                                                    <td><b>{{ 'Status'|trans }}</b>: {{ agent.status }}</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <b>{{ 'Opening number'|trans }}</b>:
                                                        {% if agent.phone_total >= 2 %}
                                                            {{ agent.fivestr|raw }}<a href="javascript:void(0)" onclick="selectAllPhones()">【{{ 'View all'|trans }}】</a>
                                                        {% else %}
                                                            {{ agent.lasfive ? agent.lasfive|raw : '' }}
                                                        {% endif %}
                                                    </td>
                                                    <td><b>{{ 'Queues'|trans }}</b>: [{{ 'Already existing'|trans }}:<font color="red">{{ agent.que_total }}</font> ] [{{ 'The most'|trans }}: {{ agent.groups }} ]</td>
                                                </tr>
                                                <tr>
                                                    <td> <b>{{ 'The number of seats'|trans }}</b>: [{{ 'Already existing'|trans }}:<font color="red">{{ agent.agent_total }}</font> ] [{{ 'The maximum log'|trans }}:{{ agent.agent_logins }} ] [{{ 'Create up to'|trans }}: {{ agent.agents }} ]</td>
                                                    <td><b>{{ 'IVR line number'|trans }}</b>: {{ agent.ivr_line }}</td>
                                                </tr>
                                                <tr>
                                                    <td> <b>{{ 'Effective time'|trans }}</b>: {{ agent.open_date }} {{ 'To'|trans }} {{ agent.due_date }}</td>
                                                    <td></td>
                                                </tr>
                                            </table>
                                        </div>
                                        {#<div class="col-xs-6 col-sm-6">#}
                                        {#<ul class="list-unstyled spaced">#}
                                        {#<li>#}
                                        {#<b>{{ 'SIP phone configuration information'|trans }}</b>#}
                                        {#</li>#}
                                        {#<div class="col-xs-6 col-sm-12">#}
                                        {#<li>#}
                                        {#&nbsp;&nbsp;{{ 'Registered address'|trans }}:#}
                                        {#</li>#}
                                        {#<li>#}
                                        {#&nbsp;&nbsp;{{ 'Telephone registration'|trans }}:#}
                                        {#</li>#}
                                        {#</div>#}
                                        {#</ul>#}
                                        {#</div>#}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 widget-container-col">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="smaller widget-title">{{ 'My menu'|trans }}</h4>
                                {{ widgetButton() }}
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="tags" style="width: auto;border: none;cursor: pointer" id="tags">
                                        {% for tag in tags %}
                                            <span class="tag" id="tag_{{ tag.id }}">
                                                <span onclick="showTab('{{ tag.menuText }}','{{ path(tag.menuUrl) }}')">{{ tag.menuText }}</span>
                                                <button type="button" class="close" onclick="delTag('{{ tag.id }}',{{ tag.menuId }})">×</button></span>
                                        {% endfor %}
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-10 col-sm-5">
                                            <select class="form-control" onchange="addTag(this.value)" id="tagSelect">
                                                <option value="-1"></option>
                                                {% for key,menu in menus %}
                                                    {% if menu.is_show == 1 %}
                                                        <option value="{{ menu.id }}" {% if menu.son is defined %}disabled{% endif %}>{{ menu.html }}{{ menu.menu_text }}</option>
                                                        {% if menu.son is defined %}
                                                            {% for son1 in menu.son %}
                                                                <option value="{{ son1.id }}" {% if son1.son is defined %}disabled{% endif %}>{{ son1.html }}{{ son1.menu_text }}</option>
                                                                {% if son1.son is defined %}
                                                                    {% for son2 in son1.son %}
                                                                        <option value="{{ son2.id }}" >{{ son2.html }}{{ son2.menu_text }}</option>
                                                                    {% endfor %}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    <div id="dialog-confirm" class="hide row text-center">
        {% if agent.phone_total >= 2 %}
            {{ agent.allstr|raw }}
        {% endif %}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@gritter_js'
    '@slimscroll_js'
    '@chart_js'
    '@jquery_ui_js'
    '@common_js'
    '@tree_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        function showTab(name, url)
        {
            window.parent.createTab(name, url);
        }
        /**
         * 添加标签
         * @param val
         */
        function addTag(val)
        {
            if (val == -1) {
                return;
            }
            if (val.length >= 1) {
                $.ajax({
                    type:'post',
                    url:'{{ path('system_user_menu') }}',
                    data: 'id='+val,
                    success:function(res){
                        if (res.error) {
                            gritterAlert('{{ 'Prompt'|trans }}', res.message, 'error');
                        } else {
                            var str = "<span class='tag' id='tag_"+res.data.id+"'><span  onclick=\"showTab('"+res.data.menuText+"','"+res.data.menuUrl+"')\">"+res.data.menuText+"</span><button type='button' class='close' " +
                                    "onclick='delTag("+res.data.id+","+res.data.menuId+")'>×</button></span>";
                            $(str).appendTo("#tags");
                            $("#tagSelect option[value='"+res.data.menuId+"']").attr("disabled", true);
                        }
                    }
                })
            }
        }

        /**
         * 删除tag
         * @param id
         */
        function delTag(id,menuId)
        {
            $.ajax({
                type:'post',
                url:'{{ path('system_user_del_menu') }}',
                data: 'id='+id,
                success:function(res){
                    if (res.error) {
                        gritterAlert('{{ 'Prompt'|trans }}', res.message, 'error');
                    } else {
                        $("#tag_"+id).remove();
                        $("#tagSelect option[value='"+menuId+"']").attr("disabled", false).removeAttr("selected");
                        $('#tagSelect option[value="-1"]').attr("selected", 'selected');
                    }
                }
            })
        }

        $('.widget-container-col').sortable({
            connectWith: '.widget-container-col',
            items:'> .widget-box',
            opacity:0.8,
            revert:true,
            forceHelperSize:true,
            placeholder: 'widget-placeholder',
            forcePlaceholderSize:true,
            tolerance:'pointer',
            start: function(event, ui){
                //when an element is moved, it's parent becomes empty with almost zero height.
                //we set a min-height for it to be large enough so that later we can easily drop elements back onto it
                ui.item.parent().css({'min-height':ui.item.height()})
                //ui.sender.css({'min-height':ui.item.height() , 'background-color' : '#F5F5F5'})
            },
            update: function(event, ui) {
                ui.item.parent({'min-height':''})
                //p.style.removeProperty('background-color');
            }
        });
        /*
        var myBar = echarts.init(document.getElementById('bar'));
        var option_bar = {
            title : {
                text: '系统信息监控',
                x:'center',
                y:'bottom'
            },
            animation:false,
            tooltip : {
                show:true
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['排队','振铃','通话','整理','就绪','置忙']
                }
            ],
            yAxis : [
                {
                    name:'个数',
                    type : 'value',
                    splitArea:{show:true}
                }
            ],
            series : [
                {
                    type:'bar',
                    barWidth:80,
                    data:[
                        {value:0,itemStyle:{normal:{color:'#98BAD4',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#E6C359',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#9FBD47',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#E59968',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#268E8E',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#C86565',label:{show:true,textStyle:{fontSize:18}}}}}
                    ]
                }
            ]
        };
        function updateChart()
        {
            $.ajax({
                type:"POST",
                url:'{ path('icsoc_monitor_system_monitor_data') }}',
                dataType:'json',
                async:false,
                success:function (responce){
                    if(responce['error']=='0') {
                        option_bar.series[0].data[0].value = responce['content']['queue_nums'];
                        option_bar.series[0].data[1].value = responce['content']['ring_nums'];
                        option_bar.series[0].data[2].value = responce['content']['call_nums'];
                        option_bar.series[0].data[3].value = responce['content']['wait_nums'];
                        option_bar.series[0].data[4].value = responce['content']['ready_nums'];
                        option_bar.series[0].data[5].value = responce['content']['busy_nums'];
                        myBar.setOption(option_bar);
                    } else {
                        gritterAlert("{ 'Prompt'|trans }}", responce['message'], 'info');
                    }
                }
            });
        }
        $(document).ready(function(){
            //updateChart();
        })*/
        $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
            _title: function(title) {
                var $title = this.options.title || '&nbsp;'
                if( ("title_html" in this.options) && this.options.title_html == true )
                    title.html($title);
                else title.text($title);
            }
        }));
        function selectAllPhones()
        {
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                modal: false,
                title_html: true,
                height:'auto',
                title: "<div class='widget-header'><h4 class='smaller'>{{ 'Opening number'|trans }}</h4></div>"
            });
        }
        var ace_icon = ace.vars['icon'];
        var DataSourceTree = function(options) {
            this._data 	= options.data;
            this._delay = options.delay;
        };
        DataSourceTree.prototype.data = function(options, callback) {
            var self = this;
            var $data = null;

            if(!("name" in options) && !("type" in options)){
                $data = this._data;//the root tree
                callback({ data: $data });
                return;
            } else if ("type" in options && options.type == "folder") {
                if("additionalParameters" in options && "children" in options.additionalParameters)
                    $data = options.additionalParameters.children;
                else $data = {}//no data
            }
            if($data != null)//this setTimeout is only for mimicking some random delay
                setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);
        };
        $(document).ready(function(){
            var tree_data_2 = {};
            {% for menu in menus %}
            {% set key = loop.index0 %}
                {% if menu.son is not defined %}
                    tree_data_2[{{ key }}] = {name: '{{ menu.menu_text }}', type: 'item', id:'{{ menu.id }}' };
                {% else %}
                    tree_data_2[{{ key }}] = {name: '{{ menu.menu_text }}', type: 'folder'};
                    var chilred = [];
                    {% for son in menu.son %}
                         {% set kson = loop.index0 %}
                        {% if son.son is defined %}
                            chilred.push({name:'{{ son.menu_text }}', type:'folder'});
                        {% else %}
                            chilred.push({name: '<i class="'+ace_icon+' fa fa-file-text grey"></i>{{ son.menu_text }}', type: 'item',id:'{{ son.id }}'});
                        {% endif %}
                    {% endfor %}
                    tree_data_2[{{ key }}]['additionalParameters'] = {'children':chilred};
                    {% for kson,son in menu.son %}
                        {% set kson = loop.index0 %}
                        {% if son.son is defined %}
                             var tchi = [];
                             {% for tkey,tson in son.son %}
                                tchi.push({name: '<i class="'+ace_icon+' fa fa-file-text grey"></i>{{ tson.menu_text }}', type: 'item',id:'{{ tson.id }}'});
                             {% endfor %}
                             tree_data_2[{{ key }}]['additionalParameters']['children'][{{ kson }}]['additionalParameters'] = {'children':tchi};
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
            var treeDataSource2 = new DataSourceTree({data: tree_data_2});
            $('#tree2').ace_tree({
                dataSource: treeDataSource2 ,
                loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
                'open-icon' : 'ace-icon fa fa-folder-open',
                'close-icon' : 'ace-icon fa fa-folder',
                'selectable' : true,
                'selected-icon' : null,
                'unselected-icon' : null
            }).on('');
            $('#tree2').on('selected.fu.tree',function(e,item){
                var id = item.info[0].id;
                if (id) {
                    window.location.href='{{ path('system_user_down_help') }}?id='+id;
                }
            });
        })
        //诸葛用户打点
       zhuge.identify('{{ app.user.username }}', {"username" : '{{ app.user.adminname }}'});
    </script>
{% endblock %}